<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    // 只要 p p1 p2 p3 中途有一个失败 => 后面都是失败 => 错误的状态和数据都会向后传递
    // 成功 就走then()中的回调函数,将回调函数函数结果 作为Promise实例的数据向后传递 

    // 如何记忆: 成功的可以一直成功,一失足成千古恨
    // (1) then()方法中回调函数的返回值都是非Promise对象:   Promise实例依次指定了一个或多个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数,如果代码在在执行的过程中,出现错误,会被catch方法捕获(catch会捕获整个链式操作过程中的错误)。

    // (2) then()方法中回调函数的返回值都是Promise对象:   Promise实例依次指定了一个或多个回调函数。前一个回调函数完成以后,返回的结果是一个Promise对象，会等待该Promise对象状态改变之后再将Promise对象中存储的结果作为参数，传入后一个回调函数,如果代码在在执行的过程中,出现错误,会被catch方法捕获(catch会捕获整个链式操作过程中的错误)。


    // 异步操作 => 延迟指定事件 返回对应状态的Promise实例
    function getNum(val = 0, delay = 0, isFulfilled = true) {
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () {
                isFulfilled ? resolve(val) : reject(val);
            }, delay);
        })
        return p; // {pending:undefind} Promise实例 (指定时间后改变状态)
    }

    // 同时启动三个异步操作
    var p1 = getNum(1, 2000);
    var p2 = getNum(2, 1000);
    var p3 = getNum(3, 3000);
    console.log(p1, p2, p3);

    // Promise对象then方法的嵌套使用 (恐怖回调)
    // p1.then(num => {
    //     console.log(num);
    //     p2.then(num => {
    //         console.log(num);
    //         p3.then(num => {
    //             console.log(num);
    //         }).catch(err => {
    //             throw err;
    //         })
    //     }).catch(err => {
    //         throw err;
    //     })
    // }).catch(err => {
    //     throw err;
    // })

    // 链式操作  (同时开启异步操作 按顺序返回结果)
    // p1.then(num => {
    //     console.log("fulfilled", num);  // 1
    //     return p2; // 返回的是Promise对象  => 等该Promise对象状态改变之后,在根据状态来判断走then还是catch, Promise对象中存储的数据会向后传递
    // }).then(num => {
    //     console.log("fulfilled", num);  // 2
    //     return p3;
    // }).then(num => {
    //     console.log("fulfilled", num);  // 3
    // }).catch(err => {
    //     console.log("rejected", err);
    //     // throw err;
    // })

    // 链式操作  (第一个异步完成 再启动第二个  之后再启动第三个)
    getNum(1, 2000).then(num => {
        console.log("fulfilled", num);  // 1
        return getNum(2, 1000); // 返回的是Promise对象  => 等该Promise对象状态改变之后,在根据状态来判断走then还是catch, Promise对象中存储的数据会向后传递
    }).then(num => {
        console.log("fulfilled", num);  // 2
        return getNum(3, 3000);;
    }).then(num => {
        console.log("fulfilled", num);  // 3
    }).catch(err => {
        console.log("rejected", err);
        // throw err;
    })







</script>

</html>